import {  Component} from "react";
// 函数子组件
function Son1(props) {
  console.log(props);
  return(
    <div>
      <h2>函数子组件</h2>
      <ul>
        <li>{props.count}</li>
        <li>{props.a}</li>
        <li>{props.tpl}</li>
      </ul>
      <button>调用父组件方法</button>
    </div>
  )
}

// 类子组件

class Son2 extends Component{

  render(){
    console.log(this);
    return(
      <div>
          <h2>类子组件</h2>
          <ul>
            <li>{this.props.count}</li>
            <li>{this.props.obj.name}</li>
            <li>{this.props.obj.age}</li>
            <li>{this.props.tpl}</li>
          </ul>
      </div>
    )
  }
}

/**
 * **props 是只读对象**，也就是说：只能读取对象中的属性，无法修改
 * **单向数据流**，也叫做：自顶而下（自上而下）的数据流
+ 表示：父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
+ 类比：就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响
 * 可以传递任意数据（数字  字符串  布尔类型 数组 对象 函数 jsx）
 * 
 */

// 父组件
class App extends Component{
  state={
    count:10,
    obj:{
      name:'ls',
      age:'12'
    },
    tpl:<h3>传递jsx</h3>
  }
  add=()=>{
    this.setState({
      count:this.state.count+1
    })
  }

  parentFn=()=>{
    console.log(this);
  }
  render(){
    return(
      <div>
        <h1>父组件</h1>
        <p>{this.state.count}</p>
        <button onClick={this.add}>btn</button>
        <hr />
        <Son1 count={this.state.count} a='zs' tpl={this.state.tpl} parentFn={this.parentFn}></Son1>
        <Son2 count={this.state.count} obj={this.state.obj} tpl={this.state.tpl}></Son2>
      </div>
    )
  }
}
export default App